<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .header{
            width: 100%;
            height: 100px;
            background-color: greenyellow;
            text-align: center;
            line-height: 100px;
        }
        .con{
            width: 100%;
            height: 500px;
            background-color: hotpink;
            text-align: center;
            line-height: 100px;
        }
        .footer{
            width: 100%;
            height: 100px;
            background-color: maroon;
            text-align: center;
            line-height: 100px;
        }

    </style>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <myheader></myheader>
        <mycon :phone="phonelist"></mycon>
        <myfooter></myfooter>

    </div>
    <script>
        var myheader = {
            template:`<div class='header'>头</div>`
        }
        var myitem = {
            props:["i"],
            template:`<li>
                <span>{{i.id}}</span>
                <span>{{i.name}}</span>
                <span>{{i.phone}}</span>
                </li>`
          
        }
        var mycon = {
            props: ['phone'],
            mounted () {
                console.log(this.phone);
            },
            template:`<div class='con'>
                <ul>
                    <myitem v-for="item in phone" :i='item'>

                        
                        </myitem>
                    </ul>
                
                </div>`,
                components: {
                    myitem
                }
        }
        var myfooter = {
            template:`<div class='footer'>版权：© 归0426班所有</div>`
        }
        var app =new Vue({
            el:"#app",
            data () {
                phonelist: [//电话号码数据
					{ "id": 1, "name": "斯琴高娃", "phone": "13412340987" },
					{ "id": 2, "name": "高晓松", "phone": "13512340987" },
					{ "id": 3, "name": "迪丽热巴", "phone": "13612341234" },
					{ "id": 4, "name": "韩红", "phone": "13312340987" },
					{ "id": 5, "name": "梁朝伟", "phone": "15812340987" },
				]
            },
            components: {
                myheader,mycon,myfooter
            }

        })
    </script>
</body>
</html>